<template>
	<view class="drag optional diy-search-box" :style="{
			background: itemData.style.background,
			paddingLeft: itemData.style.paddingLeft*2 + 'rpx',
			paddingRight: itemData.style.paddingLeft*2  + 'rpx',
			paddingTop: itemData.style.paddingTop*2  + 'rpx',
			paddingBottom: itemData.style.paddingBottom *2 + 'rpx'
		}">
		<view class="top_head pr">
			<!-- #ifdef APP -->
			<view class="state_top"></view>
			<!-- #endif -->
			<view class="head_top" :style="'height:'+topBarTop()+'px;'"></view>
		</view>
		<view class="diy-search navigation d-s-c" :style="{
					background: itemData.style.bgcolor,
					borderTopLeftRadius: itemData.style.topRadio*2  + 'rpx',
					borderTopRightRadius: itemData.style.topRadio*2  + 'rpx',
					borderBottomLeftRadius: itemData.style.bottomRadio*2  + 'rpx',
					borderBottomRightRadius: itemData.style.bottomRadio *2 + 'rpx'
				}">
			<image v-if="itemData.params.title_type == 'image'" class="logo-img" :src="itemData.params.toplogo"
				mode="aspectFill"></image>
			<view v-if="itemData.params.title_type == 'text'" class="f30"
				:style="{color: itemData.style.titleTextColor}">
				{{itemData.params.title}}
			</view>
			<view @click="gotoSearch" class="phone-top-search-box d-s-c"
				:style="{background: itemData.style.searchBackGround,color: itemData.style.searchColor,marginRight:topBarRight()}">
				<text class="icon iconfont icon-sousuo1"
					:style="{color:itemData.style.searchColor|| '#999'}"></text>{{itemData.params.searchText}}
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		props: ['itemData'],
		methods: {

			/*跳转搜索页面*/
			gotoSearch() {
				let url = '/pages/product/search/search';
				this.gotoPage(url);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.diy-search {
		padding: 18rpx 24rpx 18rpx 24rpx;
		/* #ifdef MP */
		padding-top: 0;

		/* #endif */
		.logo-img {
			display: block;
			width: 78rpx;
			height: 64rpx;
		}

		.phone-top-search-box {
			margin-left: 30rpx;
			flex: 1;
			height: 60rpx;
			border-radius: 60rpx;
			font-size: 26rpx;
			line-height: 60rpx;
			color: #999999;
			padding: 0 20rpx;
		}

		.icon.icon-sousuo1 {
			font-size: 26rpx;
			margin-right: 20rpx;
		}
	}

	.diy-search-box {
		position: sticky;
		width: 100%;
		top: 0;
		left: 0;
		box-sizing: border-box;
		z-index: 100;
	}
</style>